<template>
  <div class="right-content">
    <div class="department-input">
      <el-input
      placeholder="请输入部门名称"
      prefix-icon="el-icon-search"
      v-model="filterText">
    </el-input>
    </div>
    <!-- 部门树 start -->
    <div body-tree>
      <el-tree
        :data="deps"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        ref="tree">
        <span
          class="custom-tree-node"
          slot-scope="{ data }"
          style="display: flex;justify-content: space-between; width: 100%"
        >
          <span style="width: 100%">{{ data.name }}</span>
          <span class="link-span">
             <el-link
              type="primary"
              class="depBtn"
              @click="() => showAddDep(data)">
              添加子部门
            </el-link>
            <el-link
              type="danger"
              class="depBtn"
              @click="() => deleteDep(data)">
              删除部门
            </el-link>
          </span>
        </span>
      </el-tree>
    </div>
    <!-- 部门树 end -->
    <el-dialog
      title="添加部门"
      :visible.sync="dialogVisible"
      width="30%">
      <div>
        <table>
          <tr>
            <td>
              <el-tag>上级名称</el-tag>
            </td>
            <td>
              <el-tag>{{pname}}</el-tag>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>部门名称</el-tag>
            </td>
            <td>
              <el-input v-model="dep.name" placeholder="请输入部门名称"></el-input>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddDep()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Departments } from '../../utils/cards'
export default {
  name: 'DepartmentManage',
  data() {
    return {
      filterText: '',
      deps: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false, // 添加部门弹框
      dep: {
        name: '',
        parentId: -1
      },
      pname: ''
    }
  },
  mounted() {
    this.initDeps()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 初始化表单数据
    initDep() {
      this.dep = {
        name: '',
        parentId: -1
      }
      this.pname = ''
    },
    // 获取部门数据
    initDeps() {
      this.getRequest('/admin/').then(resp => {
        if (resp) {
          this.deps = resp.data
        }
      }, error => console.log(error))
    },
    // 过滤节点，如果找到查询的节点，则返回true，否则false
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 显示部门弹框
    showAddDep(data) {
      this.dep.parentId = data.id // 父部门Id
      this.pname = data.name // 父部门名称
      this.dialogVisible = true
      console.log(data)
    },
    // 添加部门
    doAddDep() {
      this.postRequest('/admin/', this.dep).then(resp => {
        if (resp) {
          this.dialogVisible = false
          this.initDeps()
          this.$forceUpdate()
          // this.addDep2Deps(this.deps, resp.obj) // 手动更新页面上的部门分支树
          this.$message.success(resp.mesg)
          this.initDep()
        }
      })
    },
    // 手动更新页面上新增的部门分支树
    addDep2Deps(deps, dep) {
      for (var i = 0; i < deps.length; i++) {
        var d = deps[i]
        if (d.id === dep.parentId) {
          d.children = d.children.concat(dep)
          if (d.children.length > 0) {
            d.isParent = true
          }
          return
        } else {
          this.addDep2Deps(d.children, dep)
        }
      }
    },
    // 删除部门
    deleteDep(data) {
      if (data.isParent) {
        this.$message.error('该部门下含有子部门，删除失败')
      } else {
        this.$confirm(`此操作将永久删除[${data.name}]文件, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest(`/admin/${data.id}`).then(resp => {
            if (resp) {
              this.removeDepFromDeps(null, this.deps, data.id)
              this.$message.success(resp.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 手动更新页面上删除的部门分支树
    removeDepFromDeps(p, deps, id) {
      for (var i = 0; i < deps.length; i++) {
        var d = deps[i]
        if (d.id === id) {
          deps.splice(i, 1)
          if (deps.length === 0) {
            p.isParent = false
          }
          return
        } else {
          this.removeDepFromDeps(d, d.children, id)
        }
      }
    }
  }
}
</script>

<style>
/** 头部搜索框 */
.department-input {
  width: 50%;
  padding: 2vh 0 2vh 1vw;
}
.el-input__inner {
  font: 1vw '宋体';
}
/** 部门树 */
.el-tree {
  width: 97%;
  height: 68vh;
  margin-left: 1vw;
  overflow: hidden;
  overflow-y: auto;
}
/** 提示文字 */
.testtooltip {
  width: 50px;
  height: 8px;
  line-height: 8px;
}
/**  */
/** 按钮样式 */
.depBtn {
  padding-right: 1vw !important;
  height: 3vh !important;
}
</style>
